<template>
  <div class="recommendation-container">
    <el-row :gutter="20">
      <el-col :span="16">
        <el-card class="recommendation-card">
          <template #header>
            <div class="card-header">
              <span>智能种植建议</span>
              <el-button type="primary" @click="generateRecommendation">生成建议</el-button>
            </div>
          </template>

          <div class="recommendation-content" v-loading="loading">
            <div v-if="recommendation" v-html="recommendation"></div>
            <el-empty v-else description="暂无种植建议" />
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card class="info-card">
          <template #header>
            <div class="card-header">
              <span>农场信息</span>
            </div>
          </template>

          <el-form label-position="top">
            <el-form-item label="作物类型">
              <el-select v-model="farmInfo.cropType" placeholder="请选择作物类型">
                <el-option label="水稻" value="rice" />
                <el-option label="小麦" value="wheat" />
                <el-option label="玉米" value="corn" />
                <el-option label="蔬菜" value="vegetables" />
              </el-select>
            </el-form-item>

            <el-form-item label="种植面积">
              <el-input-number v-model="farmInfo.area" :min="1" :max="1000" />
              <span class="unit">亩</span>
            </el-form-item>

            <el-form-item label="土壤类型">
              <el-select v-model="farmInfo.soilType" placeholder="请选择土壤类型">
                <el-option label="砂质土" value="sandy" />
                <el-option label="粘土" value="clay" />
                <el-option label="壤土" value="loam" />
              </el-select>
            </el-form-item>

            <el-form-item label="灌溉方式">
              <el-select v-model="farmInfo.irrigationType" placeholder="请选择灌溉方式">
                <el-option label="滴灌" value="drip" />
                <el-option label="喷灌" value="sprinkler" />
                <el-option label="漫灌" value="flood" />
              </el-select>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

interface FarmInfo {
  cropType: string
  area: number
  soilType: string
  irrigationType: string
}

const farmInfo = ref<FarmInfo>({
  cropType: '',
  area: 1,
  soilType: '',
  irrigationType: ''
})

const recommendation = ref('')
const loading = ref(false)

const generateRecommendation = async () => {
  if (!farmInfo.value.cropType || !farmInfo.value.soilType || !farmInfo.value.irrigationType) {
    ElMessage.warning('请填写完整的农场信息')
    return
  }

  loading.value = true
  try {
    // TODO: 调用 DeepSeek API 生成建议
    setTimeout(() => {
      recommendation.value = `
        <h3>智能种植建议</h3>
        <p>根据您提供的农场信息，我们为您生成以下种植建议：</p>
        <h4>1. 种植计划</h4>
        <ul>
          <li>建议种植时间：3月中旬至4月初</li>
          <li>种植密度：每亩${farmInfo.value.area * 1000}株</li>
          <li>预计收获时间：8月下旬</li>
        </ul>

        <h4>2. 水肥管理</h4>
        <ul>
          <li>灌溉频率：每周2-3次</li>
          <li>施肥方案：基肥+追肥，分3次施用</li>
          <li>建议使用有机肥配合复合肥</li>
        </ul>

        <h4>3. 病虫害防治</h4>
        <ul>
          <li>定期检查作物生长状况</li>
          <li>预防性喷洒生物农药</li>
          <li>保持田间通风良好</li>
        </ul>

        <h4>4. 注意事项</h4>
        <ul>
          <li>注意天气变化，做好防灾准备</li>
          <li>保持田间卫生，及时清除杂草</li>
          <li>定期记录生长数据，及时调整管理方案</li>
        </ul>
      `
      loading.value = false
    }, 2000)
  } catch (error) {
    ElMessage.error('生成建议失败')
    loading.value = false
  }
}
</script>

<style scoped>
.recommendation-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.recommendation-content {
  min-height: 400px;
  padding: 20px;
}

.info-card {
  height: 100%;
}

.unit {
  margin-left: 8px;
  color: #666;
}

:deep(.el-form-item__label) {
  font-weight: bold;
}
</style>
